/**
* 头部菜单
*/ 
<template>
  <el-menu
    class="el-menu-demo flex-align-center"
    mode="horizontal"
    background-color="#fff"
    text-color="#333"
    active-text-color="#333"
  >
    <i class="f22 ml16"
      :class="{
        'el-icon-s-fold': !collapsed,
        'el-icon-s-unfold': collapsed,
      }"
      style="cursor: pointer"
      @click="toggle(collapsed)"
    ></i>
    <span class="header_title flex-1 f-22">绩效管理平台</span>
    <el-dropdown>
          <div class="avatar-warp">
            <span>{{userInfo.name}}</span>
            <i class="el-icon-arrow-down el-icon--right"></i>
          </div>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item @click.native='content'>个人中心</el-dropdown-item>
            <el-dropdown-item @click.native="logout">用户退出</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
  </el-menu>
</template>
<script>
import { mapMutations, mapState } from "vuex";
import {Apilogout} from '@/api'
export default {
  name: "navcon",
  data() {
    return {
      imgshow: require("../assets/img/show.png"),
      imgsq: require("../assets/img/sq.png"),
    };
  },
  computed: {
    ...mapState(["collapsed",'userInfo']),
  },

  methods: {
    ...mapMutations(["changeCollapsed",'claerInfo']),
    // 切换显示
    toggle(showtype) {
      this.changeCollapsed(!showtype);
    },
    content() {
      //个人中心
      this.$router.push('/User/center')
    },
    logout() {
      //退出
      Apilogout().then(res => {
        sessionStorage.clear()
        this.claerInfo()
        this.$router.push('/login')
        location.reload()
      })

    },
  },
};
</script>
<style lang='less'>
.el-menu-demo {
  height: 60px;
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    border: none;
  }
  .buttonimg {
    height: 60px;
    background-color: transparent;
    border: none;
  }
  .showimg {
    width: 26px;
    height: 26px;
  }
  .el-submenu__title {
    border-bottom: none !important;
  }
  .header_title{
    color: #333;
    margin-left: 8px;
    font-weight: bold;
  }
}

</style>